<!-- @author whx @date 2022/2/17-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户管理系统登陆</title>
</head>
<body>
<div id="ada">
    <form id="form">
        账号：<input name="username" type="text" placeholder="请输入账号"/>
        <br/>
        密码：<input name="password" type="password" placeholder="请输入密码"/>
        <br/>
        <input type="button" value="登陆" onclick="signIn()"/>
    </form>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script>
    function signIn(){
        $.ajax({
            // 几个参数需要注意一下
            type: "POST",// 方法类型
            dataType: "text",// 预期服务器返回的数据类型
            /*
            dataType:
                要求为String类型的参数，预期服务器返回的数据类型。如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。可用的类型如下：
                xml：返回XML文档，可用JQuery处理。
                html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。
                script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时（不在同一个域下），所有post请求都将转为get请求。
                json：返回JSON数据。
                jsonp：JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个“?”为正确的函数名，以执行回调函数。
                text：返回纯文本字符串。
            */
            url: "user/loginWithMysql",// url
            data: $('#form').serialize(),// 这个是form表单中的id   jQuery的serialize()方法通过序列化表单值
            // data: {
            //   username: "root",
            //   password: "123456"
            // },
            success: function (res) {
                console.log("请求结果",res)
                if(res === "true"){
                    alert("登陆成功");
                    // window.location.href="xxx.html";
                }else{
                    alert("登陆失败");
                }
            },
            error : function(res) {
                console.log(res)
                alert("服务器异常");
            }
        });
    }
</script>
</body>


</html>